<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			{{fruits[0]}}
			{{fruits[1]}}
			{{fruits[2]}}
			<br>
			<h1 v-for="(item,index) in fruits">
				{{index+1}}:{{item}}
			</h1>
			<br>
			{{veg[0]}}
			{{veg[1]}}
			{{veg[2]}}
			<h1 v-for="(item,index) in veg">
				{{index+1}}:{{item}}
			</h1>
			{{goods.title}}
			<!--对象: 属性值，属性名称   键对值-->
			<h1 v-for="(value,key) in goods">
				{{key}}:{{value}}
			</h1>
			数字迭代，从1开始
			<h1 v-for="i in 10">
				{{i}}
			</h1>
			1-100之间的偶数
			<template v-for="i in 100">
				<h1 v-if="i%2==0">
				{{i}}
			    </h1>
			</template>
			<ul>
				<li v-for="(item,index) in shopCar">
					标题：{{item.title}}  <br>
					价格：{{item.price}}
				</li>
			</ul>
			二维数组
			<table border="">
				<tr v-for="(row,r) in table":key='r'>
					<td v-for="(col,c) in row" :key="r+'-'+c"> 
						{{col}}
					</td>
				</tr>
			</table>
		</div>
		<script>
			Vue.createApp({
				data() {
					return{
						fruits:["苹果","香蕉","梨",1,false],
						veg:["土豆","生菜","番茄"],
						goods:{
							title:'华为手机',
							price:1999
						},
						shopCar:[
							{
								title:'小米手机',
								price:2878
							},
							{
								title:'羽绒服',
								price:2120
							}
						],
						table:[
							[1,2,3,4,5],
							[1,2,3,4,5],
							[1,2,3,4,5],
							[1,2,3,4,5],
							[1,2,3,4,5]							
						]
					}
				}
			}).mount('#app')
		</script>
	</body>
</html>